<script>
    import { defineComponent, ref, onMounted, computed } from '@vue/composition-api';
    import { GetActivityMemberList, ActivityReplaceSign, GetDict, getClassList, addList, GetActivityMemberList1 } from '@/api/activity';
    import { MessageBox, Message } from 'element-ui';
    import { getToken } from '@/utils/auth';
    import router from '@/router';
    import { mapGetters } from 'vuex';
    import { download } from '@/utils/request';

    export default defineComponent({
        props: {
            activityId: String,
        },
        setup(props,context) {
            const loading = ref(false);
            const open = ref(false);
            const open1 = ref(false);
            const multiple = ref(true);
            const selectionList = ref([]);
            const studentList = ref([]);
            const dictValue = ref([]);
            const classList = ref([]);
            const pageNum = ref(1);
            const pageSize = ref(10);
            const formModel = ref({});
            const total = ref(0);
            const exportC = async () => {
                // upload.value.open = true
                getValue()
                open.value = true
            };
            const change = async (e) => {
                console.log(e);
                const response = await getClassList(e);
                classList.value = response.data
            };
            const handleSelectionChange = (selection) => {
                console.log(selection);
                selectionList.value = selection
                multiple.value = !selection.length;
            }
            const getValue = async () => {
                const response = await GetDict();
                console.log(response);
                dictValue.value = response.data
            }
            const cancel = async () => {
                open.value = false
                formModel.value.type = ''
                formModel.value.name = ''
                studentList.value = []
                total.value = 0
            }
            const submitFileForm = async () => {
                const payload = {
                    activityMemberList: selectionList.value,
                    activityId: props.activityId
                }
                console.log(payload);
                const response = await addList(payload);
                console.log(response);
                if (response.code == 200) {
                    Message({
                        message: '操作成功',
                        type: 'success',
                    });
                    context.emit('loadData')
                    cancel()
                } else {
                    Message({
                        message: response.msg,
                        type: 'error',
                    });
                    context.emit('loadData')
                    cancel()
                    
                }
            }
            const loadData1 = async () => {
                loading.value = true;
                const payload = {
                    pageNum: pageNum.value,
                    pageSize: pageSize.value,
                    ...formModel.value,
                };
                const response = await GetActivityMemberList1(payload);
                loading.value = false;
                console.log(response);
                if (response.code === 200) {
                    const { rows, total: rowTotal } = response;
                    studentList.value = rows;
                    total.value = rowTotal;
                }
            };
            // const loadData= async () => {
            //     loading.value = true;
            //     const payload = {
            //         pageNum: 1,
            //         pageSize: 10,
            //         mark2:0,
            //         activityId:props.activityId
            //     };
            //     const response = await GetActivityMemberList(payload);
            //     loading.value = false;
            //     console.log(response);
            // };
            onMounted(() => {

            });
            return {
                submitFileForm,
                open,
                exportC,
                formModel,
                change,
                handleSelectionChange,
                studentList,
                cancel,
                dictValue,
                multiple,
                getValue,
                classList,
                selectionList,
                loadData1,
                loading,
                total,
                pageNum,
                pageSize,
            };
        },
    });
</script>
<template>
    <div>
    <el-button type="primary" size="mini" @click="exportC" >选择导入学生</el-button>
    <el-dialog title="选择性导入学生" :visible.sync="open" width="800px" append-to-body>
        <el-form ref="formRef" :model="formModel" inline size="mini">
            <el-form-item label="系部/班级" prop="studentId">
                <el-select v-model="formModel.type" placeholder="请选择" @change="change($event)">
                    <el-option v-for="dict in dictValue" :key="dict.dictValue" :label="dict.dictLabel"
                        :value="dict.dictValue"></el-option>
                </el-select>
                <el-select v-model="formModel.name" placeholder="请选择" style="margin-left: 20px;">
                    <el-option v-for="(dict,idx) in classList" :key="idx" :label="dict" :value="dict"></el-option>
                </el-select>
            </el-form-item>
            <!-- <el-form-item label="系部/班级" prop="studentId"> -->

            <!-- </el-form-item> -->
            <el-form-item>
                <el-button type="primary" size="mini" @click="loadData1" :disabled='!formModel.name'>查询</el-button>
                <el-button type="primary" @click="submitFileForm" :disabled='multiple'>批量导入</el-button>
            </el-form-item>
        </el-form>
        <el-table border :data="studentList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="学号" align="center" prop="userName" />
            <el-table-column label="姓名" align="center" prop="nickName" />
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="pageNum" :limit.sync="pageSize"
            @pagination="loadData1" />
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancel">取 消</el-button>
        </div>
    </el-dialog>
</div>
</template>